<script setup lang="ts">
import { ref } from 'vue'
import LaptopPreviewer from '@/components/AppPreviewer/LaptopPreviewer.vue';
import MobilePreviewer from '@/components/AppPreviewer/MobilePreviewer.vue';
import type { PreviewType } from './type'

const previewMode = ref<PreviewType>('laptop')

const handleModeChange = (mode: PreviewType) => {
    previewMode.value = mode
}
</script>
<template>
    <div class="layout-content">
        <LaptopPreviewer
            v-if="previewMode === 'laptop'"
            :key="'laptop'"
            :preview-mode="previewMode"
            @preview-mode-change="handleModeChange"
        />
        <MobilePreviewer
            v-if="previewMode === 'mobile'"
            :key="'mobile'"
            :preview-mode="previewMode"
            @preview-mode-change="handleModeChange"
        />
    </div>
</template>
<style scoped>
.layout-content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    flex: 1;
    background-color: var(--color-gray-100);
}
</style>